<template>
  <div class="records-page">
    <!-- 签到成功记录 -->
    <el-card class="records-card">
      <template #header>
        <div class="card-header">
          <h3>签到记录</h3>
          <el-button type="primary" @click="fetchAllRecords" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 成功签到记录 -->
        <el-tab-pane label="成功签到" name="success">
          <el-table
            v-if="activeTab === 'success'"
            :data="successRecords"
            v-loading="loading"
            height="calc(100vh - 300px)"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="detail" label="签到类型">
              <template #default="{ row }">
                <el-tag type="success">{{ row.detail }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="signTime" label="签到时间">
              <template #default="{ row }">
                {{ formatDateTime(row.signTime) }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template #default>
                <el-tag type="success">签到成功</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 未签到记录 -->
        <el-tab-pane label="未签到" name="unsigned">
          <el-table
            v-if="activeTab === 'unsigned'"
            :data="unsignedRecords"
            v-loading="loading"
            height="calc(100vh - 300px)"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="teacherName" label="老师姓名" />
            <el-table-column prop="type" label="签到类型">
              <template #default="{ row }">
                <el-tag :type="getSignTypeTag(row.type)">{{ getSignTypeText(row.type) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间">
              <template #default="{ row }">
                {{ formatDateTime(row.startTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间">
              <template #default="{ row }">
                {{ formatDateTime(row.endTime) }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template #default>
                <el-tag type="info">未签到</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 空状态显示 -->
      <el-empty
        v-if="showEmpty"
        :description="activeTab === 'success' ? '暂无签到记录' : '暂无未签到记录'"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SignRecordsPage'
}
</script>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import { getSignRecords, getExpiredUnsignedActivities } from '@/api/student'
import dayjs from 'dayjs'

const loading = ref(false)
const activeTab = ref('success')
const successRecords = ref([])
const unsignedRecords = ref([])

// 计算是否显示空状态
const showEmpty = computed(() => {
  return activeTab.value === 'success' 
    ? successRecords.value.length === 0 
    : unsignedRecords.value.length === 0
})

// 格式化日期时间
const formatDateTime = (dateStr) => {
  return dayjs(dateStr).format('YYYY年MM月DD日 HH:mm:ss')
}

// 获取签到类型的标签类型
const getSignTypeTag = (type) => {
  const types = {
    normal: 'primary',
    code: 'warning',
    qr: 'success'
  }
  return types[type] || 'info'
}

// 获取签到类型的文本
const getSignTypeText = (type) => {
  const types = {
    normal: '普通签到',
    code: '签到码',
    qr: '二维码',
    gesture: '九宫格',
    location: '位置签到'
  }
  return types[type] || '未知类型'
}

// 获取成功签到记录
const fetchSuccessRecords = async () => {
  try {
    const response = await getSignRecords()
    console.log('Success Records Response:', response)
    if (response.code === 200) {
      successRecords.value = response.data || []
    } else {
      ElMessage.error(response.message || '获取签到记录失败')
    }
  } catch (error) {
    console.error('获取签到记录失败:', error)
    ElMessage.error(error.response?.data?.message || '获取签到记录失败')
  }
}

// 获取未签到记录
const fetchUnsignedRecords = async () => {
  try {
    const response = await getExpiredUnsignedActivities()
    console.log('Unsigned Records Response:', response)
    if (response.code === 200) {
      unsignedRecords.value = response.data || []
    } else {
      ElMessage.error(response.message || '获取未签到记录失败')
    }
  } catch (error) {
    console.error('获取未签到记录失败:', error)
    ElMessage.error(error.response?.data?.message || '获取未签到记录失败')
  }
}

// 获取所有记录
const fetchAllRecords = async () => {
  loading.value = true
  try {
    await Promise.all([
      fetchSuccessRecords(),
      fetchUnsignedRecords()
    ])
  } finally {
    loading.value = false
  }
}

// 处理标签页切换
const handleTabClick = () => {
  nextTick(() => {
    // 在下一个 tick 重新获取数据
    fetchAllRecords()
  })
}

// 页面加载时获取记录
onMounted(() => {
  nextTick(() => {
    fetchAllRecords()
  })
})
</script>

<style scoped>
.records-page {
  max-width: 1200px;
  margin: 0 auto;
}

.records-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-tabs__content) {
  padding: 20px 0;
}

:deep(.el-table) {
  margin-bottom: 20px;
}
</style> 